<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive exclude="Detail">
        <router-view></router-view>
      </keep-alive>
    </transition>
     <!-- <div id="nav">
      <router-link to="/home">首页 / </router-link>
      <router-link to="/user">个人主页 / </router-link>
      <router-link to="/detail">详情页 / </router-link>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      transitionName: ''
    }
  },
  watch: { // 使用watch 监听$router的变化  使用动态过渡
    $route (to, from) {
      // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta) {
        if (to.meta.index > from.meta.index) {
          this.transitionName = 'slide-left'
        } else if (to.meta.index < from.meta.index) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = ''
        }
      }
    }
  }
}
</script>
<style lang="less">
  @import 'assets/css/base.less';
  #app{
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 500ms;
      position: absolute;
    }
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-to {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }
</style>
